<template>
    <Tooltip
        class="form-error-tip"
        placement="top"
        :content="content"
        :disabled="disabled"
        :always="value"
    >
        <div @mouseleave="hide">
            <slot></slot>
        </div>
    </Tooltip>
</template>
<script>
export default {
    props: {
        content: {
            default: '',
            type: String
        },
        value: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        value (n) {
            n && this.delayHide()
        }
    },
    computed: {
        disabled () {
            return !this.content
        }
    },
    methods: {
        clearTimer () {
            this.timer && clearTimeout(this.timer)
        },
        delayHide () {
            this.clearTimer()
            this.timer = setTimeout(() => {
                this.hide()
            }, 2500)
        },
        hide () {
            this.clearTimer()
            this.$emit('input', false)
        }
    },
    beforeDestroy () {
        this.clearTimer()
    }
}
</script>
// .form-error-tip {
//     .ivu-tooltip-popper[x-placement^="top"] .ivu-tooltip-arrow {
//         border-top-color: #dc143c;
//     }
//     .ivu-tooltip-inner {
//         background-color: #dc143c;
//     }
// }
